<template>
    <div>
        <Alert>
            <Row type="flex" justify="start" :gutter="20">
                <Col span="5">
                    <Input @on-change="search" clearable placeholder="请输入医院名称" v-model="searchObj.yymc"
                           icon="ios-search"/>
                </Col>
                <Col span="5">
                    <Input @on-change="search" clearable placeholder="请输入单位名称" v-model="searchObj.companyName"
                           icon="ios-search"/>
                </Col>
                <Col span="3">
                    <Button class="search-btn" type="primary" @click="addBtn">
                        <Icon type="md-add"/>
                        添加
                    </Button>
                </Col>
            </Row>
        </Alert>
        <br>
        <Row type="flex" justify="center">
            <Col span="24">
                <Table border :loading="tableLoading" :columns="tableColumns" :data="tableData">
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="action-btn" @click="editBtn(row)">编辑</Button>
                        <div v-show="row.state==='未审核'">
                            <Button type="primary" size="small" class="action-btn" @click="check(row)">审核</Button>
                        </div>
                        <Button type="info" size="small" class="action-btn" @click="infoBtn(row)">详情</Button>
                        <Button type="error" size="small" class="action-btn" @click="delBtn(row)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo"/>
        </Row>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  pointHospitalList, updatePointHospital, deletePointHospital
} from '@/api/yuyq'
import OptionModal from './components/option-modal'

export default {
  components: { OptionModal },
  data () {
    return {
      spinShow: false,
      searchObj: {},
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      tableColumns: [
        {
          type: 'index',
          title: '单位编码',
          key: 'company_code',
          width: 200,
          // fixed: 'left',
          align: 'center'
        },
        // {
        //   title: '单位编码',
        //   key: 'company_code',
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '单位名称',
          key: 'company_name',
          width: 200,
          align: 'center'
        },
        {
          title: '审核状态',
          key: 'state',
          width: 200,
          align: 'center'
        },
        {
          title: '医院名称',
          width: 200,
          key: 'yymc',
          align: 'center'
        },
        {
          title: 'N95口罩库存',
          width: 200,
          key: 'n95kz_kc',
          align: 'center'
        },
        {
          title: 'N95口罩日实际消耗',
          width: 200,
          key: 'n95kz_rsjxh',
          align: 'center'
        },
        {
          title: '防护服库存',
          width: 200,
          key: 'fhf_kc',
          align: 'center'
        },
        {
          title: '防护面屏库存',
          width: 200,
          key: 'fhmp_kc',
          align: 'center'
        },
        {
          title: '日期',
          width: 200,
          key: 'date',
          align: 'center'
        },
        {
          title: '操作',
          minWidth: 250,
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    check (row) {
      this.$Modal.confirm({
        title: '确认审核此条数据么？',
        content: '请仔细核对后再操作',
        onOk: () => {
          let data = {
            state: '1',
            id: row.id
          }
          updatePointHospital(data).then(ret => {
            if (ret.data.errcode === 0) {
              const param = {
                pageNo: this.pageObj.pageNo,
                pageSize: this.pageObj.pageSize
              }
              this.init(param)
              this.success()
            }
          })
        }
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      this.init(param)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (page) {
      let data = {
        pageNo: page,
        pageSize: this.pageObj.pageSize
      }
      this.init(data)
    },
    initPage () {
      this.pageObj.pageNo = 1
      this.pageObj.pageSize = 10
    },
    init (data) {
      this.tableLoading = true
      pointHospitalList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    search () {
      this.initPage()
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        yymc: this.$common.xeUtils.trim(this.searchObj.yymc),
        company_name: this.$common.xeUtils.trim(this.searchObj.companyName)
      }
      console.log(param)
      this.init(param)
    },
    addBtn () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalData = {}
      this.modalShow = true
    },
    editBtn (val) {
      this.modalTitle = '编辑'
      this.modalType = 'edit'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    infoBtn (val) {
      this.modalTitle = '详情'
      this.modalType = 'info'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除此条数据么？',
        content: '请仔细核对后再操作',
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    deleteOne (val) {
      let data = { id: val.id }
      deletePointHospital(data).then(ret => {
        if (ret.data.errcode === 0) {
          const param = {
            pageNo: this.pageObj.pageNo,
            pageSize: this.pageObj.pageSize
          }
          this.init(param)
        }
      })
    }
  },
  mounted () {
    const param = {
      pageNo: this.pageObj.pageNo,
      pageSize: this.pageObj.pageSize
    }
    this.init(param)
  }
}
</script>

<style scoped>
    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .search-input {
        width: 180px;
    }

    .search-btn {
        width: 100px;
    }
</style>
